<template>
  <view class="container">
    <yh_input
      label="客户名称"
      placeholder="请输入"
      v-model="customerName"
      :requiredRight="true"
    />
    <yh_input
      label="客户类型"
      placeholder="请选择"
      v-model="customerType"
      :disabled="true"
      :requiredRight="true"
      :image="true"
      @click="handleSelectRightClick('customerType', true)"
    />
    <yh_input
      style="margin-top: 7px"
      label="所在地区"
      placeholder="请选择省市区"
      @click="showAddress"
      v-model="addressStr"
      :disabled="true"
      :image="true"
    />
    <yh_input
      label="办公地址"
      placeholder="请输入"
      v-model="detailedAddress"
      :disabled="true"
      :locationIconState="true"
    />
    <yh_select_sex label="性别" v-model="sex" />
    <view class="select-type-input">
      <yh_select_type v-model="mobileType" />
      <yh_input placeholder="请输入" v-model="mobileNumber" />
    </view>
    <view class="select-type-input">
      <yh_select_type v-model="mobileType" />
      <yh_input placeholder="请输入" v-model="mobileNumber" iconName=".icon-shanchuhang_zhihui" iconSize='14' iconColor="#cccccc"/>
    </view>
    <view class="add-mobile">
      <nut-icon
        font-class-name="iconfont"
        class-prefix="iconfont"
        name=".icon-tianjia_hongdi"
        size="18"
        color="#155BD4"
        class="add-mobile-icon"
      />
      <text class="add-mobile-text">添加电话</text>
    </view>
    <view class="submit_button">
      <nut-button
        size="large"
        type="primary"
        shape="square"
        color="#DC2734"
        @click="handleGo('/pages/project/approval/index')"
        >保存
      </nut-button>
    </view>
    <yh_address :close="close" v-model="showPopup" />
    <yh_right_draw
      v-model="selectRightShow"
      :selectedRightOption="selectedRightOption"
      :handleSelect="handleSelect"
      :reset="reset"
    />
  </view>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import Taro from "@tarojs/taro";
import yh_input from "@/components/yh-input.vue";
import yh_address from "@/components/yh-select-address.vue";
import yh_right_draw from "@/components/yh-right-draw.vue";
import yh_select_sex from "@/components/yh-select-sex.vue";
import yh_select_type from "@/components/yh-select-type.vue";

export default {
  name: "project-contact",
  components: {
    yh_input,
    yh_address,
    yh_right_draw,
    yh_select_sex,
    yh_select_type,
  },
  setup() {
    const state = reactive({
      customerName: "", //客户类型
      customerType: "", //客户类型
      addressStr: "", //所在地区
      detailedAddress: "", //详细地址
      sex: "1", //详细地址
      mobileType: "1", //号码类别
      mobileNumber: "", //电话号码
    });
    //展示地址弹框
    const showPopup = ref(false);
    const showAddress = () => {
      showPopup.value = !showPopup.value;
    };
    const close = (val) => {
      state.addressStr = val.data.addressStr;
    };
    const architecture = reactive({
      selectRightShow: false,
      selectRightOptions: {
        customerType: {
          title: "选择客户类型",
          list: [
            {
              type: "instruction",
              checked: false,
              open: false,
              name: "竞争对手",
              list: [],
            },
            {
              open: true,
              checked: true,
              type: "office",
              name: "政府及事业单位",
              list: [
                {
                  name: "文化教育领域",
                  checked: "false",
                },
                {
                  name: "医疗卫生领域",
                  checked: "false",
                },
                {
                  name: "银行领域",
                  checked: "false",
                },
                {
                  name: "军队领域",
                  checked: "false",
                },
                {
                  name: "党政机关",
                  checked: "false",
                },
              ],
            },
            {
              open: true,
              checked: true,
              type: "office",
              name: "公共关系",
              list: [
                {
                  name: "设计院",
                  checked: "false",
                },
                {
                  name: "监理单位",
                  checked: "false",
                },
                {
                  name: "检测单位",
                  checked: "false",
                },
                {
                  name: "质监站",
                  checked: "false",
                },
                {
                  name: "社会团体（协会、商会等）",
                  checked: "false",
                },
              ],
            },
            {
              open: true,
              checked: true,
              type: "office",
              name: "企业客户",
              list: [
                {
                  name: "装饰公司",
                  checked: "false",
                },
                {
                  name: "物业公司",
                  checked: "false",
                },
                {
                  name: "其他企业",
                  checked: "false",
                },
                {
                  name: "建筑单位",
                  checked: "false",
                },
                {
                  name: "贸易公司",
                  checked: "false",
                },
                {
                  name: "地产公司",
                  checked: "true",
                },
              ],
            },
          ],
        },
      },
      selectedRightOption: {},
    });
    const handleSelectRightClick = (
      options: string,
      selectRightShow: boolean = false
    ) => {
      architecture.selectedRightOption =
        architecture.selectRightOptions[options];
      architecture.selectRightShow = selectRightShow;
      console.log(architecture.selectRightShow);
    };
    const handleSelect = () => {};
    const reset = () => {};

    const handleGo = (url: string) => {
      console.log(state);
      return;
      Taro.navigateTo({
        url: url,
      });
    };

    return {
      showPopup,
      showAddress,
      close,
      ...toRefs(state),
      ...toRefs(architecture),
      handleGo,
      handleSelectRightClick,
      handleSelect,
      reset,
    };
  },
};
</script>

<style lang="scss">
.select-type-input {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.add-mobile {
  width: 100%;
  height: 44px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #155bd4;
  line-height: 18px;
  padding:  0 0 0 17px;
  &-text{
    padding:  0 0 0 3px;
  }
}
</style>
